<style>
.over{
    max-height: 300vh;overflow: auto;
}
</style>
<div id="main">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="ntModalLabel">{:strtoupper(lang('setting_permission_of_employees_job'))}</h4>
</div>
<div class="modal-body">
        <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="alert alert-dismissable alert-info">
                    <button type="button" class="close">×</button>
                        <p></p>
                    </div>
                </div>
            </div>
    <table class="table" v-cloak>
            <colgroup>
                <col width="170">
                <col>
              </colgroup>
        <tbody>
               <tr>
                <td>{:strtoupper(lang('job'))}</td>
                <td style="text-align: left;">{{position}} </td>
            </tr>
               <tr>
                <td style="vertical-align:top;padding:1em">{:strtoupper(lang('job_permission'))}<span class="required"></span></td>
               <td>
                    <div class="row" style="height: 100%;">
                        <div class="col-md-12">
                            <ul class="nav nav-tabs">
                                <li :class="{'active':index==0}" v-for="(menuitem,index) in menu">
                                    <a :href="'#'+menuitem.key" data-toggle="tab">{{menuitem.name}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="tab-content" style="height: 40vh;overflow: auto;">
                    <div class="cat_panel" :class="{'tab-pane':true,'active':index==0,'over':true}" :id="menuitem.key"
                         v-for="(menuitem,index) in menu">
                        <table class="table table-hover ntTable">
                            <colgroup>
                                <col width="150">
                                <col width="50">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr v-for="(child,key) in menuitem.child" v-if="child.is_show">
                                <td><input type="checkbox" @click="checkfun(key,child.level,index)" :value="child.id"
                                           :checked="child.is_choose"></td>
                                <td>
                                    <a href="javascropt:;" @click="toggle(index,key)"
                                       v-if="child.toggle && child.is_toggle"><span class="glyphicon glyphicon-minus"
                                                                                      style="margin-right:0"></span></a>
                                    <a href="javascropt:;" @click="toggle(index,key)"
                                       v-if="child.toggle && !child.is_toggle"><span class="glyphicon glyphicon-plus"
                                                                                       style="margin-right:0"></span></a>
                                </td>
                                <td :style="{'padding-left':(child.level-1)*4+'em','text-align':'left'}"><span
                                        class="fa fa-sitemap"></span>{{child.name}}
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" id="act" value="{$str}">
    <input type="hidden" id="did" value="{$id|default=''}">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>{:strtoupper(lang('cancel'))}</button>
    <button type="button" :disabled="isdisadble" class="btn btn-primary" @click="savefun" style="padding-left:24px;padding-right:24px"><span class="glyphicon glyphicon-floppy-disk"></span>{:strtoupper(lang('save'))}</button>
</div>
</div>
<script>
new Vue({
    el:'#main',
    data:{
        position:'',
        menu:[],
        choose:[],
        isdisadble: false,
    },
    mounted(){
        $('.loding').show();
        $.ajax({
            url:'/admin/organization/positionroot',
            data:{
                getposition:'',
                act:$('#act').val(),
                id:$('#did').val()
            },
            type:'post',
            success:(data)=>{
                data=JSON.parse(data)
                this.position=data.postionname//职位名称
                if(data.info)
                    this.choose=data.info.split(',')
                data.menu.forEach((element,index) => {
                    this.menu.push({    //取出主菜单
                        name:element.langname,
                        key:element.mkey,
                        child:[]
                    })
                    this.parsing(element,index,0)
                });
                $('.loding').hide();
            }
        })
        $(document).keydown((event)=>{
            if (event.keyCode == 13) {
                this.savefun()
            }
        });
    },
    methods:{
        parsing(data,index,level){
            if(data.child){
                data.child.forEach(element => {
                    var data={
                        is_choose:this.choose.indexOf(element.id.toString())!=-1,
                        id:element.id,
                        name:element.langname,
                        is_show:level+1>=2?false:true,
                        is_toggle:false,
                        level:level+1,
                    }
                    if(element.child){
                       data.toggle=true
                    }
                    this.menu[index].child.push(data)
                    if (element.child) {
                        this.parsing(element, index, level + 1)
                    }
                });
            }
        },
        checkfun(did, level, index){
                if (this.choose.indexOf(this.menu[index].child[did].id.toString()) == -1) {
                    this.choose.push(this.menu[index].child[did].id.toString())
                } else {
                    this.choose.splice(this.choose.indexOf(this.menu[index].child[did].id.toString()), 1)
                }
                if (level == 1) {
                    for (var i = did + 1; i < this.menu[index].child.length; i++) {
                        if (this.menu[index].child[i].level > 1) {
                            if (this.choose.indexOf(this.menu[index].child[did].id.toString()) == -1) {
                                this.menu[index].child[i].is_choose = false
                                if (this.choose.indexOf(this.menu[index].child[i].id.toString()) != -1)
                                    this.choose.splice(this.choose.indexOf(this.menu[index].child[i].id.toString()), 1)
                            } else {
                                this.menu[index].child[i].is_choose = true
                                this.choose.push(this.menu[index].child[i].id.toString())
                            }
                        } else {
                            break;
                        }
                    }
                }
        },
        savefun(){
            this.isdisadble=true;
                $.ajax({
                    url:'/admin/organization/positionroot',
                    type:'post',
                    data:{
                        id:$('#did').val(),
                        auth_ids:this.choose,
                        act:'positionroot'
                    },
                    success:(data)=>{
                        data=JSON.parse(data)
                        if (data.status != 1) {
                            change_mes_type('.modal-body .alert',data.status)
                            $('.modal-body .alert').show()
                            $('.modal-body .alert p').html('*'+data.msg+'<br>')
                        } else {
                            change_mes_type('#headeralert',data.status)
                            $('#headeralert').show()
                            $('#headeralert p').html(data.msg+'<br>')
                            $('#position2menu_editModal').modal('hide')
                        }
                        this.isdisadble=false;
                    }
                })
        },
        toggle(index, key){
                this.menu[index].child[key].is_toggle = !this.menu[index].child[key].is_toggle
                for (var i = key + 1; i < this.menu[index].child.length; i++) {
                    if (this.menu[index].child[i].level>this.menu[index].child[key].level) {
                        this.menu[index].child[i].is_show = this.menu[index].child[key].is_toggle
                        this.menu[index].child[i].is_toggle = this.menu[index].child[key].is_toggle
                    } else {
                        break;
                    }
                }
        }
    }
})
</script>